<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../00-source/jquery.min.js"></script>
    <style>
        li img{
            height: 80px;
        }
    </style>
</head>
<body>
    <ul id="list">

    </ul>
    <script>
        $.ajax({
            url:'https://m.maizuo.com/gateway',

            // 卖座官网做了些手脚，我们需要把头部这样写一下才能正常拿到数据
            headers:{
                'X-Client-Info':'{"a":"3000","ch":"1002","v":"5.2.1","e":"16637227632405684196933633"}',
                'X-Host':'mall.film-ticket.film.list'
            },
            data:{
                cityId:310100,
                pageNum:1,
                pageSize:10,
                type:1,
                k:6574050
            }
        }).then(res=>{
            console.log(res.data.films);
            res.data.films.forEach(item=>{

                $('#list').append($(`
                <li>
                    <img src=${item.poster}/>
                    <h4>${item.name}</h4>
                    <p>${item.synopsis}</p>
                </li>
                
                `))
            })
        }).catch(
            err=>{

            }
        )
    </script>
</body>
</html>